<!--采购计划模块-->
<template>
  <div  style="position: relative;">
    <mmTable ref="mmTable" :mmColumns="columns" :getUrl="url" :updateUrl="updateUrl" :delUrl="delUrl"
             :form="form" :formData="formData" v-on:formDataChange="formDataChange"
             :searchFormData="searchFormData" :searchForm="searchForm"
             :modalWidth="700"    :beforSave="beforSave">
      <Form slot="searchForm" ref="searchForm" :model="searchFormData" inline :label-width="70"  style="float: left">
        <FormItem label="用户名" prop="">
          <Input v-model="searchFormData.name" type="text" placeholder=""/>
        </FormItem>
      </Form>
      <!--编辑添加模态框-->
      <Form  slot="editForm" :label-width="70" :model="formData" inline ref="editForm" :rules="formValidate">
          <Row>
                <Col :span="12">
                <FormItem label="批次号" prop="billcode" style="width:300px">
                    <Input v-model="formData.billcode" readonly/>
                </FormItem>
                </Col>
                <Col :span="12">
                <FormItem label="货物" prop="material" style="width:300px">
                     <materialSel v-model="formData.material"/>
                </FormItem>
                </Col>
          </Row>
          <Row>
                <Col :span="12">
                <FormItem label="供货商" prop="company" style="width:300px">
                    <compaySel v-model="formData.company"/>
                </FormItem>
                </Col>
                <Col :span="12">
                <FormItem label="金额" prop="money" style="width:300px">
                     <Input v-model="formData.money"/>
                </FormItem>
                </Col>
          </Row>
          <Row>
                <Col :span="24">
                <Table :height="300" size="small" border :columns="editTableColumns" :data="editTableData" @on-row-click="editTableClick" ref="editTable"/>
                </Col>
          </Row>
          <Row>
            <Col :span="12">
                &nbsp;
            </Col>
          </Row>
          <Row>
        <Col :span="24">
        <FormItem label="备注" prop="memo" style="width:600px">
          <Input v-model="formData.memo" type="textarea" height="300"/>
        </FormItem>
        </Col>
      </Row>
      </Form>
       <div slot="leftButtons" style="float: left">
            <Button @click="addRow">增行</Button>
            <Button @click="delRow">删行</Button>
        </div>
    </mmTable>
  </div>
</template>
<!--关联后台原料，供货商平台-->
<script>
  import materialSel from '../components/select/materialSelect.vue'
  import compaySel from '../components/select/compaySelect.vue'
  import mmTable from '../components/mmtable/mmtable.vue';
  import {getItems} from '@/api/busi'
  export default {
    components: {
      mmTable,
      materialSel,
      compaySel
    },
    data () {
      /*后台传的数据*/
      return {
        columns:[
          {title: "批次号",key: "billcode",width:200,align:'center'},
          {title: "供货商",key: "companyname",width:200,align:'center'},
          {title: "货物",key: "materialname",width:200,align:'center'},
          {title: "创建人",key: "creatorname",width:200,align:'center'},
          {title: "创建时间",key: "createtime",width:200,align:'center'},
          {title: "金额",key: "money",width:200,align:'center'},
          {title: "计划车辆",key: "sum",width:200,align:'center'},
          {title: "已到车辆",key: "come",width:200,align:'center'},
          {title: "备注",key: "memo",width:200,align:'center'}
        ],
        /*编辑列表中框中的显示列表*/
        tempArray:[],
        editTableColumns:[
                {title: "行号",width:70,align:'center',render: (h, params) => {
                    return h('div',{},params.index+1)
                }},
                {title: "车牌号",key: "car",width:200,align:'left',render: (h, params) => {
                    if (this.curEditRow == params.index) {
                        return h('Input', {
                            props: {
                                type: "text",
                                value: this.editTableData[params.index].car
                            },
                            on: {
                                'input': (val) => {
                                  params.row.car = val
                                  this.editTableData[params.index] = params.row
                                }
                            }
                        })
                    }else{
                        return h('div',{},this.editTableData[params.index].car)
                    }
                }},
                {title: "毛重",key: "gross",width:200,align:'left',render: (h, params) => {
                  if (this.curEditRow == params.index) {
                    return h('Input', {
                      props: {
                        type: "text",
                        value: this.editTableData[params.index].gross
                      },
                      on: {
                        'input': (val) => {
                          params.row.gross = val
                          this.editTableData[params.index] = params.row
                        }
                      }
                    })
                  }else{
                    return h('div',{},this.editTableData[params.index].gross)
                  }
                }},
                {title: "皮重",key: "tare",width:200,align:'left',render: (h, params) => {
                  if (this.curEditRow == params.index) {
                    return h('Input', {
                      props: {
                        type: "text",
                        value: this.editTableData[params.index].tare
                      },
                      on: {
                        'input': (val) => {
                          params.row.tare = val
                          this.editTableData[params.index] = params.row
                        }
                      }
                    })
                  }else{
                    return h('div',{},this.editTableData[params.index].tare)
                  }
                }},
                {title: "实重",key: "reals",width:200,align:'left',render: (h, params) => {
                  if (this.curEditRow == params.index) {
                    return h('Input', {
                      props: {
                        type: "text",
                        value: this.editTableData[params.index].reals
                      },
                      on: {
                        'input': (val) => {
                          params.row.reals = val
                          this.editTableData[params.index] = params.row
                        }
                      }
                    })
                  }else{
                    return h('div',{},this.editTableData[params.index].reals)
                  }
                }},
                 {title: "是否进场",width:100,align:'center',key:'isin',render:(h,params)=>{
                     if( params.row.isin=='1')
                   return h('div',{}, '已进场')
                 }},

                 {title: "备注",key: "memo",width:300,align:'left',render: (h, params) => {
                    if (this.curEditRow == params.index) {
                        return h('Input', {
                            props: {
                                type: "text",
                                value: this.editTableData[params.index].memo
                            },
                            on: {
                                'input': (val) => {
                                  params.row.memo = val
                                  this.editTableData[params.index] = params.row
                                }
                            }
                        })
                    }else{
                        return h('div',{},this.editTableData[params.index].memo)
                    }
                }}
        ],
        curEditRow:-1,
        /*链接后台*/
        url:'/purchase/getList',
        updateUrl:'/purchase/Save',
        delUrl:'/purchase/Delete',
        form:{},
        formValidate:{
        },
        searchForm:{},
        searchFormData:{
          code:'',
          name:''
        },
        editTableData:[],
        /*后台传的数据*/
        formData:{
            billcode:'',
            id:'',
            company:'',
            material:'',
            memo:'',
            sum:'',
            come:'',
            materialname:'',
            companyname:''
        },
        searchFormData:{
            name:""
        },
        searchForm:{}
      }
    },
    mounted () {
      this.form = this.$refs.editForm;
      this.searchForm = this.$refs.searchForm;
    },
    /*方法*/
    methods: {
      formDataChange(data){
        this.formData = data;
         getItems({ pid: data.id }).then(res => {
                if (res.data.code == '200') {
                  this.editTableData =res.data.data.data
                }
            });
      },
      addRow(){
            this.editTableData.push({})
            this.curEditRow = this.editTableData.length-1
      },
      delRow(){
            if(this.curEditRow>0 && this.curEditRow<this.editTableData.length){
                this.editTableData.splice(this.curEditRow,1);
            }else{
                if(this.editTableData.length>0){
                    this.editTableData.splice(this.editTableData.length-1,1);
                }
            }
            this.curEditRow = -1
      },
      editTableClick(row,index) {
            this.curEditRow = index
        },
        beforSave(){
           var items = [];
            this.editTableData.forEach((row) => {
                for (let attr in row) {
                    if (row[attr] === null) {
                        row[attr] = "";
                    }
                }
                let str = JSON.stringify(row);
                let data = JSON.parse(str);
                items.push(str)
            })

            this.formData.items = "["+items+"]"
            return true;
        }
    }
  }
</script>

<style>

</style>
